<template>
  <div>
    <el-steps :active="stepActive" align-center>
      <el-step v-for="item in stepOptions" :key="item.value" :title="item.label" @click="changeStep(item.value)"></el-step>
    </el-steps>
    <!-- <el-row style="margin:20px">
      <el-col align="right" :span="24">
        <el-input clearable style="width: 200px;" v-model="key" placeholder="请输入品牌"/>
        <el-button type="primary" @click="handleSearchBrands()">搜索</el-button>
      </el-col>
    </el-row> -->

    <el-row :gutter="10" v-show="stepActive == 1">
      <el-col :span="4" v-for="(item,index) in carModel.brands" :key="index">
        <div :class="item.active ? 'options active' : 'options'" @click="nextStep(item, 1, index)">
          <el-avatar :src="item.logo"></el-avatar>
          <span style="margin-left:5px">{{item.name}}</span>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10" v-show="stepActive == 2">
      <el-col :span="4" v-for="(item,index) in carModel.series" :key="index">
        <div :class="item.active ? 'options active' : 'options'" @click="nextStep(item, 2, index)">
          <el-avatar :src="item.photo"></el-avatar>
          <span style="margin-left:5px">{{item.name}}</span>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10" v-show="stepActive == 3">
      <el-col :span="4" v-for="(item,index) in carModel.timeTypes" :key="index">
        <div :class="item.active ? 'options active' : 'options'" @click="nextStep(item, 3, index)">
          <span style="margin-left:5px">{{item}}年款</span>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10" v-show="stepActive == 4">
      <el-col :span="4" v-for="(item,index) in carModel.carModels" :key="index">
        <div :class="item.active ? 'options active' : 'options'" @click="nextStep(item, 4, index)">
          <span style="margin-left:5px">{{item.modelName}}</span>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24" align="right">
        <el-button type="primary" @click="onSubmit">确认添加</el-button>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {
  getAllBrand,
  getSeries,
  getModelTimeType,
  getModelRank,
} from '@/api/after-sale/systemManage/carModel'
export default {
  components: {},
  name: 'DialogDataForm',
  props: {},
  data() {
    return {
      stepOptions: [
        {label: '选择品牌', value: 1, actvie: true},
        {label: '选择车系', value: 2, actvie: false},
        {label: '选择年款', value: 3, actvie: false},
        {label: '选择车型', value: 4, actvie: false},
      ],
      stepActive: 1,
      key: undefined,
      formData: {},
      carModel: {
        brands: [],
        series: [],
        timeTypes: [],
        carModels: []
      }
    }
  },
  async created() {
    this.getAllBrand();
  },
  methods: {
    // handleSearchBrands(){
    //   if (this.stepActive == 1){
    //     this.getAllBrand
    //   }
    // },
    changeStep(val){
      console.log(val);
      this.stepActive = val;
    },
    nextStep(item, steps, index){
      if (steps == 1){
        this.formData.carBrandName = item.name;
        this.formData.carBrandId = item.id;
        this.getSeries();
        this.stepOptionsFilter(steps + 1);
        this.actvieFilter(this.carModel.brands, index);
      } else if (steps == 2){
        this.formData.carSeriesName = item.name;
        this.formData.carSeriesId = item.id;
        this.getTimeType();
        this.stepOptionsFilter(steps + 1);
        this.actvieFilter(this.carModel.series, index);
      } else if (steps == 3){
        console.log(item);
        this.formData.timeType = item;
        this.formData.timeTypeId = item;
        this.getModelRank();
        this.stepOptionsFilter(steps + 1);
        this.actvieFilter(this.carModel.timeTypes, index);
      } else if (steps == 4){
        this.formData.carModelName = item.modelName;
        this.formData.carModelId = item.id;
        this.actvieFilter(this.carModel.carModels, index);
        this.onSubmit()
      }
    },
    stepOptionsFilter(val){
      this.stepOptions.forEach(e => {
        e.actvie = false;
        if (e.value == val){
          e.actvie = true;
          this.stepActive = e.value;
        }
      })
    },
    getAllBrand(){
      getAllBrand().then((res) => {
        let { data, success } = res;
        this.carModel.brands = success ? res.data : [];
      })
    },
    getSeries() {
      getSeries(this.formData.carBrandId).then((res) => {
        let { data, success } = res
        this.carModel.series = success ? res.data : [];
      })
    },
    getTimeType() {
      getModelTimeType(this.formData.carBrandId, this.formData.carSeriesId).then((res) => {
        let { data, success } = res
        this.carModel.timeTypes = success ? res.data : [];
      })
    },
    getModelRank() {
      getModelRank(this.formData.carBrandId, this.formData.carSeriesId, this.formData.timeTypeId).then((res) => {
        let { data, success } = res
        this.carModel.carModels = success ? res.data : [];
      })
    },
    onSubmit() {
      if (!this.formData.carModelName) return;
      this.$emit('operate', this.formData);
    },
    actvieFilter(arr, index){
      arr.forEach((e,i) => {
        e.active = false;
        if (i == index){
          e.active = true
        }
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.options {
  border: 1px solid #f2f2f2;
  padding: 5px 10px;
  margin: 10px 0;
  display: flex;
  align-items: center;
}
.active {
  border: 1px solid #409EFF !important;
  color: #409EFF !important;
}
</style>
